<template>
  <el-tabs type="border-card" v-model="subActiveTab">
    <el-tab-pane label="游戏本体版本" name="2">
      <div v-loading="isLoadingData">
        <el-button type="primary" plain @click="showAddVersion"
          >添加游戏版本</el-button
        >
        <el-table :data="version_list" stripe style="width: 100%">
          <el-table-column prop="id" width="80" label="ID" />
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="version" label="版本" width="180" />
          <el-table-column label="操作" fixed="right">
            <template #default="scope">
              <el-button
                size="small"
                link
                type="primary"
                @click="showModifyVersion(scope.$index)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="page"
          background
          :page-size="limit"
          layout="prev, pager, next"
          :total="total"
        />
      </div>
    </el-tab-pane>
    <el-tab-pane label="API版本" name="1">
      <div v-loading="isLoadingData">
        <el-button type="primary" plain @click="showAddVersion"
          >添加API版本</el-button
        >
        <el-table :data="version_list" stripe style="width: 100%">
          <el-table-column prop="id" width="80" label="ID" />
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="version" label="版本" width="180" />
          <el-table-column label="操作" fixed="right">
            <template #default="scope">
              <el-button
                size="small"
                link
                type="primary"
                @click="showModifyVersion(scope.$index)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="page"
          background
          :page-size="limit"
          layout="prev, pager, next"
          :total="total"
        />
      </div>
    </el-tab-pane>
    <el-tab-pane label="服务器版本" name="3">
      <div v-loading="isLoadingData">
        <el-button type="primary" plain @click="showAddVersion"
          >添加服务器版本</el-button
        >
        <el-table :data="version_list" stripe style="width: 100%">
          <el-table-column prop="id" width="80" label="ID" />
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="version" label="版本" width="180" />
          <el-table-column label="操作" fixed="right">
            <template #default="scope">
              <el-button
                size="small"
                link
                type="primary"
                @click="showModifyVersion(scope.$index)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="page"
          background
          :page-size="limit"
          layout="prev, pager, next"
          :total="total"
          style="margin: 2rem 0"
        />
      </div>
    </el-tab-pane>
  </el-tabs>
  <!---添加/编辑版本弹窗-->
  <dialog-confirm
    :title="versionConfig.id > 0 ? '修改版本' : '添加版本'"
    v-model:visible="dialogShow.addVersion"
    @submit="addVersion(versionConfig.id > 0)"
    :loading="isLocking"
  >
    <el-form>
      <el-form-item label="版本名称">
        <el-input v-model="versionConfig.name" placeholder="名称"></el-input>
      </el-form-item>
      <el-form-item label="版本版号">
        <el-input
          type="textarea"
          v-model="versionConfig.version"
          placeholder="xx.xx.xx"
        ></el-input>
      </el-form-item>
    </el-form>
  </dialog-confirm>
</template>
<script lang="ts">
import DialogConfirm from '@comps/dialogs/confirm.vue'
import Method from '@/globalmethods.ts'
import { ElMessage } from 'element-plus'
import { watch } from 'vue'
import { versionItem } from '../type.ts'

export default {
  name: 'admin-version',
  components: { DialogConfirm },
  data() {
    return {
      page: 1,
      limit: 10,
      total: 0,
      isLoadingData: false,
      isLocking: false,
      isInjecting: false,
      isPassing: false,
      subActiveTab: '1',

      versionConfig: <versionItem>{
        id: 0,
        name: '',
        version: '',
      },
      activeItem: <versionItem>{},
      version_list: <versionItem[]>[],
      dialogShow: {
        addVersion: false,
      },
    }
  },
  methods: {
    /**
     * 游戏版号管理
     */
    refreshVersionList() {
      this.isLoadingData = true
      let payLoad = {
        page: this.page,
        limit: this.limit,
        type: this.subActiveTab,
        operate: 0,
      }
      Method.api_post('/admin/version_list', payLoad).then((response) => {
        this.isLoadingData = false
        let res = response.data
        if (res.code == 200) {
          if (this.page == 1) this.total = res.sum
          this.version_list = res.data
        }
      })
    },
    showAddVersion() {
      this.dialogShow.addVersion = true
      this.versionConfig = <versionItem>{
        id: 0,
        name: '',
        version: '',
      }
    },
    addVersion(modify: boolean) {
      this.isLocking = true
      let payLoad = this.versionConfig
      payLoad.operate = 2
      payLoad.type = parseInt(this.subActiveTab)
      if (modify) {
        payLoad.id = this.activeItem.id
        payLoad.operate = 1
      }
      Method.api_post('/admin/version_list', payLoad).then((response) => {
        let res = response.data
        this.isLocking = false
        if (res.code == 200) {
          this.dialogShow.addVersion = false
          this.subActiveTab = payLoad.type + ''
          this.refreshVersionList()
          ElMessage(modify ? '修改成功' : '添加成功')
        } else {
          ElMessage(res.msg)
        }
      })
    },
    showModifyVersion(index: number) {
      this.dialogShow.addVersion = true
      this.activeItem = this.version_list[index]
      this.versionConfig = this.version_list[index]
    },
  },
  mounted() {
    this.refreshVersionList()
    watch(
      () => this.page,
      () => {
        this.refreshVersionList()
      },
    )
    watch(
      () => this.subActiveTab,
      () => {
        this.refreshVersionList()
      },
    )
  },
}
</script>
